<template>
	<view class="contenter">
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<view class="title-content">
				<view style="display: flex;padding: 20rpx 20rpx 0 20rpx; justify-content: space-between;">
					<view class="title">
						预约送货单 {{item.reservationId}}
					</view>
					<view class="title-c" style="padding: 10rpx;border-radius: 8rpx;">
						{{item.scheduledStatus | scheduledStatusFilter}}
					</view>
				</view>
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view class="column" style="display: flex;justify-content: space-between;">
					<view class="font-weight-content">
						直送仓
					</view>
					<view class="font-weight-content">
						{{item.depotName}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						{{distributionWaveNumber[item.distributionWaveNumber]}}
					</view>
					<view class="title-c" style="color: #201b8c;">
						{{item.deliveryTime}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						详细地址
					</view>
					<view class="title-c" style="flex: 1;margin-left: 10rpx;display: flex;justify-content: flex-end;">
						{{item.depotAddress}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						入库仓库
					</view>
					<view class="title-c">
						{{item.depotName}}
					</view>
				</view>
				<view class="bg-content" style="display: flex;justify-content: space-around;background-color: #f8f8f8;margin: 20rpx;padding: 30rpx;border-radius: 20rpx;">
					<view style="display: flex;padding: 20rpx;justify-content: space-between;">
						<view class="title">
							应送货：
						</view>
						<view class="title-c" style="font-weight: bold;">
							{{totalNumber(item.productInfo)}}
						</view>
					</view>
					<view style="display: flex;padding: 20rpx;justify-content: space-between;">
						<view class="title">
							已入库：
						</view>
						<view class="title-c" style="font-weight: bold;">
							67
						</view>
					</view>
				</view>
				
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view class="content-footer" style="margin-top: 20rpx;padding-bottom: 10rpx;display: flex;">
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>联系收货人</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>签到</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						@click="toDetailPage(item)">查看详情</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>转发</button>
				</view>
			</view>
		</view>
        
		<u-empty v-if=" dataList.length == 0 " style="background-color: #f3f5f3;height: 100%;"
			mode="data" icon="/static/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {scheduledStatusFilter} from '../utils/filter.js';
	import {
		getQueryScheduledApi
	} from '@/api/scheduledDelivery.js';
	export default {
		data() {
			return {
				cancellForm: {
					current: 1,
					size: 10,
				},
				totalPage: 1,
				loadMoreStatus: 'noMore', //加载更多
				dataList: [],
                scheduledStatus:{
					0:'已取消',
					1:'已预约',
					2:'已入库',
					3:'已签到'
				},
				distributionWaveNumber:{
					1:'上午',
					2:'下午',
					3:'晚上',
					4:'凌晨',
				}
			}
		},
		// 过滤器
		filters: {
			scheduledStatusFilter // 订单状态
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.cancellForm.current = 1;
				this.loadMoreStatus = 'more';
				
				this.getQueryList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.cancellForm.current++;
				this.getQueryList(true);
			},
			toDetailPage(item){
				this.$emit('toDetailPage',item)
			},
			totalNumber(item){
				let totalNumbers = 0;
				for(let ele of item){
				    totalNumbers += ele.goodsNumber;
				};
				return totalNumbers;
			},
			// --------api------获取数据
			getQueryList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.cancellForm.current = 1;
					this.loadMoreStatus = 'more';
				};
				getQueryScheduledApi(this.cancellForm).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.records, that.dataList);
					} else {
						that.dataList = data.records;
					}
					that.totalPage = data.pages;
					if (data.pages == this.cancellForm.current ||data.pages == 0) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}
</style>